<script setup lang="ts">
import { ref, computed, watch, onUnmounted } from 'vue'
import { ElProgress } from 'element-plus'

interface Props {
	modelValue: boolean // 控制显示
	text?: string // 加载文字
	size?: number // 圆形直径（px）
	lineWidth?: number // 进度条宽度
	target?: 'full' | 'container' | 'inline' // 显示模式
	color?: string | Array<{ color: string; percentage: number }> // 进度条颜色
	showPercentage?: boolean // 是否显示百分比
	showText?: boolean // 是否显示文字
	customIcon?: any // 自定义图标组件
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: false,
	text: '加载中...',
	size: 80,
	lineWidth: 8,
	target: 'inline',
	color: () => [
		{ color: '#409eff', percentage: 20 },
		{ color: '#67c23a', percentage: 80 },
		{ color: '#e6a23c', percentage: 100 }
	],
	showPercentage: true,
	showText: true
})

const emit = defineEmits(['update:modelValue'])

const progress = ref(0)
const intervalId = ref<number>()
const isActive = ref(false)
const isVisible = ref(false)

// 计算容器样式
const containerStyle = computed(() => {
	const base = { position: 'absolute' as const, inset: 0 }
	return props.target === 'full' ? { ...base, position: 'fixed' as const, zIndex: 2000 } : base
})

// 计算包装类名
const wrapperClass = computed(() => [
	'circular-loader',
	`loader-${props.target}`,
	{ 'is-transition': isActive.value }
])

// 进度颜色配置
const progressColor = computed(() => {
	if (typeof props.color === 'string') return props.color
	return props.color.length ? props.color : undefined
})

// 启动进度模拟
const startProgress = () => {
	progress.value = 0
	intervalId.value = window.setInterval(() => {
		if (progress.value < 95) {
			progress.value = Math.min(95, progress.value + Math.random() * 15)
		}
	}, 500)
}

// 显示控制
watch(
	() => props.modelValue,
	(val) => {
		if (val) {
			isVisible.value = true
			setTimeout(() => {
				isActive.value = true
				startProgress()
			}, 50)
		} else {
			progress.value = 100
			isActive.value = false
			setTimeout(() => {
				isVisible.value = false
				emit('update:modelValue', false)
			}, 500)
		}
	}
)

// 组件卸载时清理
onUnmounted(() => {
	if (intervalId.value) clearInterval(intervalId.value)
})
</script>

<template>
	<transition name="loader-fade">
		<div
			v-show="isVisible"
			:class="wrapperClass"
			:style="containerStyle"
			role="progressbar"
			:aria-valuenow="progress"
			aria-valuemin="0"
			aria-valuemax="100"
		>
			<div class="loader-mask" v-if="target === 'full'"></div>

			<div class="loader-content">
				<el-progress
					type="circle"
					:percentage="progress"
					:width="size"
					:stroke-width="lineWidth"
					:color="progressColor"
				>
					<template #default>
						<div class="loader-inner">
							<!-- 百分比显示 -->
							<div v-if="showPercentage" class="loader-percentage">{{ Math.round(progress) }}%</div>
						</div>
					</template>
				</el-progress>

				<!-- 加载文字 -->
				<div v-if="showText" class="loader-text">
					<slot name="text">{{ text }}</slot>
				</div>
			</div>
		</div>
	</transition>
</template>

<style scoped>
.loader-fade-enter-active,
.loader-fade-leave-active {
	transition: opacity 0.3s ease;
}

.loader-fade-enter-from,
.loader-fade-leave-to {
	opacity: 0;
}

.circular-loader {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(2px);
	z-index: 2000;

	&.loader-full {
		background-color: rgba(255, 255, 255, 0.85);
		.loader-mask {
			position: fixed;
			inset: 0;
			backdrop-filter: blur(4px);
		}
	}

	&.loader-container {
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	&.is-transition {
		transition: background-color 0.3s ease;
	}
}

.loader-content {
	position: relative;
	z-index: 1;
	padding: 20px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.loader-icon {
	font-size: calc(v-bind(size) * 0.4px);
	color: var(--el-color-primary);
	margin-bottom: 8px;

	&.is-rotating {
		animation: rotate 1.8s linear infinite;
	}
}

.loader-percentage {
	font-size: calc(v-bind(size) * 0.2px);
	font-weight: 600;
	color: var(--el-color-primary);
}

.loader-text {
	font-size: calc(v-bind(size) * 0.15px);
	color: var(--el-text-color-secondary);
	max-width: calc(v-bind(size) * 1.5px);
	text-align: center;
	line-height: 1.4;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 调整Element组件默认样式 */
:deep(.el-progress__text) {
	font-size: inherit !important;
}

:deep(.el-progress-circle) {
	transition: transform 0.3s ease;

	width: 100% !important;
	height: 100% !important;
}
</style>
